<template>
  <div class="app-container" style="height: 100%; flex: 1">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <!-- 表格 -->
        <el-tabs v-model="activeName" class="demo-tabs">
          <!-- 工单明细 -->
          <el-tab-pane label="工单明细" name="first">
            <div class="table">
              <el-table :border="true" :data="OrderList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 工单编号 -->
                <el-table-column label="工单编号" prop="workNo" show-overflow-tooltip width="300" />

                <!-- 结算状态 -->
                <el-table-column label="结算状态" prop="settlement" show-overflow-tooltip width="80">
                  <template v-slot="i">{{ i.row.settlement ? '已结算' : '待结算' }}</template>
                </el-table-column>

                <!-- 状态 -->
                <el-table-column label="状态" prop="status" show-overflow-tooltip width="120">
                  <template #default="scope">
                    <HStatus v-if="scope.row.status === 1" type="warning">待派单</HStatus>
                    <HStatus v-if="scope.row.status === 2" type="warning">待服务商确认</HStatus>
                    <HStatus v-if="scope.row.status === 3" type="warning">处理中</HStatus>
                    <HStatus v-if="scope.row.status === 4" type="success">已完成</HStatus>
                    <HStatus v-if="scope.row.status === 5" type="info">已取消</HStatus>
                  </template>
                </el-table-column>

                <!-- 客户 -->
                <el-table-column label="客户" prop="userName" show-overflow-tooltip min-width="100" />

                <!-- 客户电话 -->
                <el-table-column label="客户电话" prop="userPhone" show-overflow-tooltip width="108" />

                <!-- 客服 -->
                <el-table-column label="客服" prop="emp" show-overflow-tooltip width="80" />

                <!-- 申请时间 -->
                <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip width="150" />

                <!-- 更新时间 -->
                <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip width="150" />

                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" show-overflow-tooltip width="60">
                  <template #default="scope">
                    <HLink @click="goWork(scope.row.id)">详细</HLink>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 工单配件 -->
          <el-tab-pane label="工单配件" name="second">
            <div class="table">
              <el-table :border="true" :data="OrderList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 序号 -->
                <el-table-column fixed="left" label="序号" min-width="50" show-overflow-tooltip type="index" />

                <!-- 配件单号 -->
                <el-table-column fixed="left" label="配件单号" min-width="170" prop="code" show-overflow-tooltip />

                <!-- 工单单号 -->
                <el-table-column label="工单单号" prop="workNo" show-overflow-tooltip width="160" />

                <!-- 状态 -->
                <el-table-column label="状态" prop="state" width="83">
                  <template #default="scope">
                    <HStatus v-if="scope.row.status === 1" type="warning">待审核</HStatus>
                    <HStatus v-if="scope.row.status === 2" type="success">已通过</HStatus>
                    <HStatus v-if="scope.row.status === 3" type="error">已驳回</HStatus>
                    <HStatus v-if="scope.row.status === 4" type="info">已撒回</HStatus>
                    <HStatus v-if="scope.row.status === 5" type="info">已取消</HStatus>
                  </template>
                </el-table-column>

                <!-- 申请类型 -->
                <el-table-column label="申请类型" prop="type" show-overflow-tooltip width="100" />

                <!-- 配件名称 -->
                <el-table-column label="配件名称" prop="model" show-overflow-tooltip width="200" />

                <!-- 就见处理方式 -->
                <el-table-column label="旧件处理方式" show-overflow-tooltip width="100">
                  <template v-slot="i">
                    {{ i.row.oldCopeWay == 1 ? '废弃' : i.row.oldCopeWay == 2 ? '旧件退回' : '' }}
                  </template>
                </el-table-column>

                <!-- 申请数量 -->
                <el-table-column label="申请数量" prop="applyTotalQty" show-overflow-tooltip width="80" />

                <!-- 支付服务商总费用 -->
                <el-table-column label="支付服务商总费用" prop="payNetworkTotalPrice" show-overflow-tooltip width="130">
                  <template v-slot="i">￥{{ Number(i.row.payNetworkTotalPrice || 0).toFixed(2) }}</template>
                </el-table-column>

                <!-- 申请人员 -->
                <el-table-column label="申请人员" prop="applyEmp" show-overflow-tooltip width="120" />

                <!-- 审核人员 -->
                <el-table-column label="审核人员" prop="reviewEmp" show-overflow-tooltip width="120" />
                <!-- <el-table-column show-overflow-tooltip prop="network" label="申请服务商" width="150" /> -->

                <!-- 申请时间 -->
                <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip width="150" />

                <!-- 审核时间 -->
                <el-table-column label="审核时间" prop="reviewTime" show-overflow-tooltip width="150" />
                <!-- <el-table-column fixed="right" label="操作" width="60">
                    <template #default="scope">
                        <span class="waiting_x" v-if="scope.row.status == 1"
                            @click="viewCheck(scope.row)">审核</span>
                        <span class="waiting_pass" v-else>审核</span>
                    </template>
                </el-table-column> -->
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 工单费用 -->
          <el-tab-pane label="工单费用" name="third">
            <div class="table">
              <el-table :border="true" :data="OrderList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 序号 -->
                <el-table-column fixed="left" label="序号" min-width="50" show-overflow-tooltip type="index" />

                <!-- 费用单号 -->
                <el-table-column fixed="left" label="费用单号" min-width="160" prop="feeNo" show-overflow-tooltip />

                <!-- 工单单号 -->
                <el-table-column label="工单单号" prop="workNo" show-overflow-tooltip width="160" />

                <!-- 状态 -->
                <el-table-column label="状态" prop="state" width="83">
                  <template #default="scope">
                    <HStatus v-if="scope.row.status === 1" type="warning">待审核</HStatus>
                    <HStatus v-if="scope.row.status === 2" type="success">已通过</HStatus>
                    <HStatus v-if="scope.row.status === 3" type="error">已驳回</HStatus>
                    <HStatus v-if="scope.row.status === 4" type="info">已撒回</HStatus>
                    <HStatus v-if="scope.row.status === 5" type="info">已取消</HStatus>
                  </template>
                </el-table-column>

                <!-- 结算类型 -->
                <el-table-column label="结算类型" prop="settlementType" show-overflow-tooltip width="100" />

                <!-- 项目费用名称 -->
                <el-table-column label="项目费用名称" prop="feeProject" show-overflow-tooltip width="100" />

                <!-- 支付服务商总费用 -->
                <el-table-column label="支付服务商总费用" prop="payNetworkTotalPrice" show-overflow-tooltip width="130">
                  <template v-slot="i">￥{{ Number(i.row.payNetworkTotalPrice || 0).toFixed(2) }}</template>
                </el-table-column>

                <!-- 申请人员 -->
                <el-table-column label="申请人员" prop="applyEmp" show-overflow-tooltip width="120" />

                <!-- 申请人员 -->
                <el-table-column label="审核人员" prop="reviewEmp" show-overflow-tooltip width="120" />

                <!-- 申请服务商 -->
                <el-table-column label="申请服务商" prop="network" show-overflow-tooltip width="150" />

                <!-- 申请时间 -->
                <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip width="150" />

                <!-- 审核时间 -->
                <el-table-column label="审核时间" prop="reviewTime" show-overflow-tooltip width="150" />
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 结算明细 -->
          <el-tab-pane label="结算明细" name="fourth">
            <div class="table">
              <el-table :border="true" :data="tableData" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 申请类型 -->
                <el-table-column label="申请类型" min-width="200" prop="date" show-overflow-tooltip />

                <!-- 申请费用 -->
                <el-table-column label="申请费用" prop="city" show-overflow-tooltip width="120" />

                <!-- 审批费用 -->
                <el-table-column label="审批费用" prop="city" show-overflow-tooltip width="120" />

                <!-- 审核人员 -->
                <el-table-column label="审核人员" prop="city" show-overflow-tooltip width="120" />

                <!-- 申请时间 -->
                <el-table-column label="申请时间" prop="city" show-overflow-tooltip width="180" />

                <!-- 更新时间 -->
                <el-table-column label="更新时间" prop="city" show-overflow-tooltip width="180" />

                <!-- 状态 -->
                <el-table-column label="状态" prop="city" show-overflow-tooltip width="120" />

                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" show-overflow-tooltip width="100">
                  <template #default="scope">
                    <div class="btns">
                      <button class="btn-table bgColor1" @click="goWork(scope.$index)">工单</button>
                      <router-link class="btn-table bgColor2" to="/order/ocost">查看</router-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 结算价管理 -->
          <el-tab-pane label="结算价管理" name="fifth">
            <div class="table">
              <el-table :border="true" :data="OrderList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 序号 -->
                <el-table-column fixed="left" label="序号" show-overflow-tooltip type="index" width="50" />

                <!-- 模块名称 -->
                <el-table-column label="模块名称" prop="moduleName" show-overflow-tooltip />

                <!-- 结算费用 -->
                <el-table-column label="结算费用" prop="price" show-overflow-tooltip>
                  <template v-slot="i">￥{{ i.row.price }}</template>
                </el-table-column>
                <!--创建时间-->
                <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" />

                <!--更新时间-->
                <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" />
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 账号管理 -->
          <el-tab-pane label="账号管理" name="six">
            <div class="addrole">
              <HPlainButton @click="editDialogShow(true)">添加员工</HPlainButton>
            </div>
            <div class="table">
              <el-table :border="true" :data="fifthList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 员工姓名 -->
                <el-table-column label="员工姓名" prop="userName" show-overflow-tooltip width="200" />

                <!-- 手机号 -->
                <el-table-column label="手机号" prop="userPhone" show-overflow-tooltip width="104" />

                <!-- 角色管理 -->
                <el-table-column label="角色管理" prop="superManager" show-overflow-tooltip width="74">
                  <template #default="scope">{{
          scope.row.superManager ? '管理员' : '工程师'
        }}</template>
                </el-table-column>

                <!-- 负责人 -->
                <el-table-column align="center" label="负责人" width="70">
                  <template #default="scope">
                    <el-checkbox v-if="scope.row.manager" :checked="scope.row.manager" disabled
                      style="display: inline" />
                  </template>
                </el-table-column>

                <!-- 在职状态 -->
                <el-table-column label="在职状态" prop="quit" show-overflow-tooltip width="80">
                  <template #default="scope">
                    <HStatus v-if="scope.row.quit" type="info">离职</HStatus>
                    <HStatus v-else>在职</HStatus>
                  </template>
                </el-table-column>

                <!-- 技能 -->
                <el-table-column label="技能" min-width="200" prop="networkEmpSkill" show-overflow-tooltip />

                <!-- 等级 -->
                <el-table-column label="等级" prop="networkEmpLevel" show-overflow-tooltip width="120" />

                <!-- 接单策略 -->
                <el-table-column label="接单策略" show-overflow-tooltip width="80">
                  <template #default="scope">{{
          scope.row.autoSureReceiveOrder ? '自动确认' : '手动确认'
        }}</template>
                </el-table-column>

                <!-- 添加时间 -->
                <el-table-column label="添加时间" prop="createTime" show-overflow-tooltip width="128" />

                <!-- 更新时间 -->
                <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip width="128" />

                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" show-overflow-tooltip width="60">
                  <template #default="i">
                    <HLink @click="editDialogShow(false, i.row)">详细</HLink>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 资质信息 -->
          <el-tab-pane label="资质信息" name="seven">
            <div class="table">
              <el-table :border="true" :data="OrderList" height="100%" resizable stripe
                style="width: 100%; position: absolute">
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <!-- 申请类型 -->
                <el-table-column label="申请类型" min-width="200" prop="date" show-overflow-tooltip />

                <!-- 申请费用 -->
                <el-table-column label="申请费用" prop="city" show-overflow-tooltip width="120" />

                <!-- 审批费用 -->
                <el-table-column label="审批费用" prop="city" show-overflow-tooltip width="120" />

                <!-- 审核人员 -->
                <el-table-column label="审核人员" prop="city" show-overflow-tooltip width="120" />

                <!-- 申请时间 -->
                <el-table-column label="申请时间" prop="city" show-overflow-tooltip width="180" />

                <!-- 更新时间 -->
                <el-table-column label="更新时间" prop="city" show-overflow-tooltip width="180" />

                <!-- 状态 -->
                <el-table-column label="状态" prop="city" show-overflow-tooltip width="120" />

                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" show-overflow-tooltip width="100">
                  <template #default="scope">
                    <div class="btns">
                      <button class="btn-table bgColor1" @click="goWork(scope.$index)">工单</button>
                      <router-link class="btn-table bgColor2" to="/order/ocost">查看</router-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 分页 -->
        <div v-if="activeName != 'seven'" class="footer">
          <Pagination ref="pageRef" :list_total="total" @size-change="getnetworkListRows()"
            @current-change="getnetworkListRows()" />
        </div>
      </div>
      <SelfDefined :assignDialog="addDialog" :empInfo="empInfo" :is-add="modalIsAdd" :network-id="route.params.id"
        @assign-dialog="addDialog = false" @update-list="getnetworkListRows" :teamType="teamType" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Pagination from '@/components/Pagination/index.vue'
import { nextTick, onMounted, reactive, ref, watch, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
import SelfDefined from '../../../network/emp/components/SelfDefined.vue'
import {
  getNetworkDetailAuthenField,
  getNetworkDetailEmpList,
  getNetworkDetailModuleSettlementList,
  getNetworkDetailOrderFeeList,
  getNetworkDetailOrderList,
  getNetworkDetailOrderSpareList,
} from '@/api/network'
import { Emp } from '../../emp/list/types'
import HStatus from '@/components/common/status/HStatus.vue'
import HLink from '@/components/common/link/HLink.vue'
import HPlainButton from '@/components/common/button/HPlainButton.vue'

const props = defineProps({
  teamType: [String, Number],
})
const { teamType } = toRefs(props)
const router = useRouter()
const route = useRoute()
const pageRef = ref()
const activeName = ref('first')
const addDialog = ref(false)
let total = ref(0)

// 弹窗是否为添加：true-是，false-不是
const modalIsAdd = ref(null)

let OrderList = ref(null)
let fifthList = ref(null)
let data = reactive({
  limit: 50,
  page: 1,
})
const emits = defineEmits(['loading-change'])
const tableData = []
// 查看工单
const goWork = (n: number) => {
  router.push('/order/odetail/' + n)
}
watch(activeName, (n) => {
  total.value = 0
  switch (n) {
    case 'first':
      NetworkDetailOrderList(getNetworkDetailOrderList)
      break
    case 'second':
      NetworkDetailOrderList(getNetworkDetailOrderSpareList)
      break
    case 'third':
      NetworkDetailOrderList(getNetworkDetailOrderFeeList)
      break
    case 'fourth':
      break
    case 'fifth':
      NetworkDetailOrderList(getNetworkDetailModuleSettlementList)
      break
    case 'six':
      nextTick(() => {
        NetworkDetailEmpList()
      })
      break
    case 'seven':
      getNetworkDetailAuthenFielddata()
      break
  }
})
// 点击分页
const getnetworkListRows = () => {
  switch (activeName.value) {
    case 'first':
      NetworkDetailOrderList(getNetworkDetailOrderList)
      break
    case 'second':
      NetworkDetailOrderList(getNetworkDetailOrderSpareList)
      break
    case 'third':
      NetworkDetailOrderList(getNetworkDetailOrderFeeList)
      break
    case 'fourth':
      break
    case 'fifth':
      NetworkDetailOrderList(getNetworkDetailModuleSettlementList)
      break
    case 'six':
      nextTick(() => {
        NetworkDetailEmpList()
      })
      break
    case 'seven':
      getNetworkDetailAuthenFielddata()
      break
  }
}
const getNetworkDetailAuthenFielddata = async () => {
  OrderList.value = null

  emits('loading-change', true)
  await getNetworkDetailAuthenField(route.params.id).then((res) => {
    if (res.data.success) {
      OrderList.value = res.data.data.rows
    } else {
      if (res.data.isError) ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        offset: 200,
      })
    }
    emits('loading-change', false)
  })
}
onMounted(async () => {
  await NetworkDetailOrderList(getNetworkDetailOrderList)
})

// 工单明细列表or工单配件
async function NetworkDetailOrderList(port) {
  OrderList.value = null
  data.limit = pageRef.value?.size
  data.page = pageRef.value?.current
  emits('loading-change', true)
  await port(data, route.params.id).then((res) => {
    if (res.data.success) {
      OrderList.value = res.data.data.rows
      total.value = Number(res.data.data.total)
    } else {
      if (res.data.isError) ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        offset: 200,
      })
    }
    emits('loading-change', false)
  })
}

// 获取员工管理
async function NetworkDetailEmpList() {
  data.limit = pageRef.value?.size
  data.page = pageRef.value?.current
  emits('loading-change', true)
  await getNetworkDetailEmpList(data, route.params.id).then((res) => {
    if (res.data.success) {
      fifthList.value = res.data.data.rows
      total.value = Number(res.data.data.total)
    } else {
      if (res.data.isError) ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        offset: 200,
      })
    }
    emits('loading-change', false)
  })
}

// 添加or修改员工信息
const empInfo = ref<Emp | null>(null)

function editDialogShow(isAdd: boolean, row?: Emp) {
  addDialog.value = true
  modalIsAdd.value = isAdd
  empInfo.value = row
}

onBeforeRouteLeave(() => {
  addDialog.value = false
})
</script>
<style lang="scss" scoped>
@import './index';
</style>
